<template>
  <div class="personal-main">
    <div class="personal-pay">
      <h3><i>借款人信息认证</i></h3>
      <el-steps :active="borrowerStatus" finish-status="success">
        <el-step title="填写借款人信息"></el-step>
        <el-step title="提交平台审核"></el-step>
        <el-step title="认证结果"></el-step>
      </el-steps>
    </div>
    <div v-if="borrowerStatus === 0" class="user-borrower">
      <h6>个人基本信息</h6>
      <el-form label-width="120px">
        <el-form-item label="年龄">
          <el-col :span="5">
            <el-input v-model="borrower.age" />
          </el-col>
        </el-form-item>

        <el-form-item label="性别">
          <el-select v-model="borrower.sex">
            <el-option :value="1" :label="'男'" />
            <el-option :value="0" :label="'女'" />
          </el-select>
        </el-form-item>
        <el-form-item label="婚否">
          <el-select v-model="borrower.marry">
            <el-option :value="true" :label="'是'" />
            <el-option :value="false" :label="'否'" />
          </el-select>
        </el-form-item>
        <el-form-item label="学历">
          <el-select v-model="borrower.education">
            <el-option
              v-for="item in educationList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="行业">
          <el-select v-model="borrower.industry">
            <el-option
              v-for="item in industryList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="月收入">
          <el-select v-model="borrower.income">
            <el-option
              v-for="item in incomeList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="还款来源">
          <el-select v-model="borrower.returnSource">
            <el-option
              v-for="item in returnSourceList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <h6>联系人信息</h6>
      <el-form label-width="120px">
        <el-form-item label="联系人姓名">
          <el-col :span="5">
            <el-input v-model="borrower.contactsName" />
          </el-col>
        </el-form-item>
        <el-form-item label="联系人手机">
          <el-col :span="5">
            <el-input v-model="borrower.contactsMobile" />
          </el-col>
        </el-form-item>
        <el-form-item label="联系人关系">
          <el-select v-model="borrower.contactsRelation">
            <el-option
              v-for="item in contactsRelationList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <h6>身份认证信息</h6>
      <el-form label-width="120px">
        <el-form-item label="身份证人像面">
          <el-upload
            :on-success="onUploadSuccessIdCard1"
            :on-remove="onUploadRemoveIdCard1"
            :multiple="false"
            :action="uploadUrl"
            :data="{ dir: 'idCard1' }"
            :limit="1"
            list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="身份证国徽面">
          <el-upload
            :on-success="onUploadSuccessIdCard2"
            :on-remove="onUploadRemoveIdCard2"
            :multiple="false"
            :action="uploadUrl"
            :data="{ dir: 'idCard2' }"
            :limit="1"
            list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <h6>其他信息</h6>
      <el-form label-width="120px">
        <el-form-item label="房产信息">
          <el-upload
            :on-success="onUploadSuccessHouse"
            :on-remove="onUploadRemoveHouse"
            :multiple="false"
            :action="uploadUrl"
            :data="{ dir: 'house' }"
            list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="车辆信息">
          <el-upload
            :on-success="onUploadSuccessCar"
            :on-remove="onUploadRemoveCar"
            :multiple="false"
            :action="uploadUrl"
            :data="{ dir: 'car' }"
            list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <el-form label-width="120px">
        <el-form-item>
          <el-button type="primary" :disabled="submitBtnDisabled" @click="save">
            提交
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div v-if="borrowerStatus === 1">
      <div style="margin-top: 40px">
        <el-alert
          title="您的认证申请已成功提交，请耐心等待"
          type="warning"
          show-icon
          :closable="false"
        >
          我们将在2小时内完成审核，审核时间为周一至周五8:00至20:00。
        </el-alert>
      </div>
    </div>

    <div v-if="borrowerStatus === 2 || borrowerStatus === -1">
      <div style="margin-top: 40px">
        <el-alert
          v-if="borrowerStatus === 2"
          title="您的认证审批已通过"
          type="success"
          show-icon
          :closable="false"
        >
        </el-alert>
        <el-button
          v-if="borrowerStatus === 2"
          type="primary"
          @click="onGoBorrow"
          >去借款</el-button
        >

        <el-alert
          v-if="borrowerStatus === -1"
          title="您的认证审批未通过"
          type="error"
          show-icon
          :closable="false"
        >
        </el-alert>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      borrowerStatus: 0,
      submitBtnDisabled: false,
      borrower: {},
      educationList: [],
      industryList: [],
      incomeList: [],
      returnSourceList: [],
      contactsRelationList: [],
      uploadUrl: "http://192.168.1.110/api/oss",
    };
  },
  methods: {
    onGoBorrow() {
      this.$router.push("/user/apply");
    },
    save() {
      let token = localStorage.getItem("SRB-TOKEN");
      if (!token) {
        this.$message.warning("登陆信息过期,请重新登录");
        return;
      }
      this.$axios({
        method: "POST",
        url: "/api/core/borrower/save",
        data: this.borrower,
        headers: { token },
      });
    },
    onUploadSuccessIdCard1(response, file, fileList) {
      this.borrower.idCard1 = response.data.path;
    },
    onUploadRemoveIdCard1(file, fileList) {
      this.borrower.idCard1 = "";
    },
    onUploadSuccessIdCard2(response, file, fileList) {
      this.borrower.idCard2 = response.data.path;
    },
    onUploadRemoveIdCard2(file, fileList) {
      this.borrower.idCard2 = "";
    },
    onUploadSuccessHouse(response, file, fileList) {
      this.borrower.house = response.data.path;
    },
    onUploadRemoveHouse(file, fileList) {
      this.borrower.house = "";
    },
    onUploadSuccessCar(response, file, fileList) {
      this.borrower.car = response.data.path;
    },
    onUploadRemoveCar(file, fileList) {
      this.borrower.car = "";
    },
  },
  async mounted() {
    let token = localStorage.getItem("SRB-TOKEN");
    if (!token) {
      alert("登陆信息已经过期");
      return;
    }
    let res = await this.$axios({
      method: "GET",
      url: "/api/core/borrower/status",
      headers: { token },
    })
    this.borrowerStatus = res.data.data.item
    console.log("res=",res);
    console.log(this.borrowerStatus);
    if (this.borrowerStatus == 0) {
      this.$axios({
        method: "GET",
        url: "/api/core/dict/list/education",
      }).then((r) => {
        this.educationList = r.data.data.items;
      });
      this.$axios({
        method: "GET",
        url: "/api/core/dict/list/industry",
      }).then((r) => {
        this.industryList = r.data.data.items;
      });
      this.$axios({
        method: "GET",
        url: "/api/core/dict/list/income",
      }).then((r) => {
        this.incomeList = r.data.data.items;
      });
      this.$axios({
        method: "GET",
        url: "/api/core/dict/list/returnSource",
      }).then((r) => {
        this.returnSourceList = r.data.data.items;
      });
      this.$axios({
        method: "GET",
        url: "/api/core/dict/list/relation",
      }).then((r) => {
        this.contactsRelationList = r.data.data.items;
      });
    }
  },
};
</script>
